<!DOCTYPE html>
<html>

	<head>
		<title>注册验证</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

		<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="dist/css/bootstrapValidator.css" />

		<script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
		<style type="text/css">
			body{
				background:url(img/purple.jpg) no-repeat;
				color: white;
			
			}
			h2,h4{
				text-align: center;
			}
			h5{
				text-align:right;
				color:white;
			}
			
			#defaultForm {
				margin-left: 50px;
			}
			

		</style>
	</head>

	<body>

<div data-role="header"   >
	<h2>用户注册</h2>
	<hr />
</div>

<div data-role="main" class="ui-content">

	  <form id="defaultForm" method="post" " class="form-horizontal">
                        <fieldset>
                           

                            <div class="form-group">
                                <label class="col-lg-3 control-label">用户名：</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="username" placeholder="在此处输入用户名..."/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">密码：</label>
                                <div class="col-lg-5">
                                    <input type="password" class="form-control" name="password" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-3 control-label">确认密码：</label>
                                <div class="col-lg-5">
                                    <input type="password" class="form-control" name="confirmPassword" />
                                </div>
                            </div>
							<div class="form-group">
                                <label class="col-lg-3 control-label">手机号：</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="phoneNumberCN" />
                                </div>
                            </div>
							<div class="form-group">
									<label for="bday"  class="col-lg-3 control-label">生日：</label>
									 <div class="col-lg-5">
									<input type="date" name="bday" id="bday">
									</div>
							</div>
							 <div class="form-group">
                                <label class="col-lg-3 control-label">邮箱：</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" name="email" />
                                </div>
                            </div>
                           
						  
                        </fieldset>
  								<h5>	<a href="login.html">登录</a> | <a href="index.html">暂不注册</a></h5>
                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
              
</div>       
 <hr />      
<div data-role="footer" data-position="fixed" >
	<h4>灵乐在线乐器学习平台</h4>
</div>






<script type="text/javascript ">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '用户名无法验证',
                validators: {
                    notEmpty: {
                        message: '用户名不允许为空'
                    },
                    stringLength: {
                        min: 8,
                        max: 14,
                        message: '用户名长度必须为8-14'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: '用户名只能使用英文字符'
                    }
                }
            },
           
           
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '邮箱不合法'
                    }
                }
            },
           
            phoneNumberCN: {
                validators: {
                    phone: {
                        message: '输入电话不是中国号码',
						country:'CN'
						
                    }
                }
            },
            
           
           
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: '和确认密码不一致或确认密码为空'
                    }
                }
            },
            confirmPassword: {
                validators: {
                    notEmpty: {
                        message: '必须填确认密码'
                    },
                    identical: {
                        field: 'password',
                        message: '密码不一致'
                    }
                }
            },
          
        }
    });
});
</script>
</body>
</html>